<template>
  <div class="setExam">
    <div v-if="$store.state.teacherInfomation">
      <!-- Tabs 组件提供了选项卡功能 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 单选题 -->
        <el-tab-pane label="单选题" name="first"
          ><el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="单选题" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form.tm"
                placeholder="请输入题目如:1+1=2?"
              ></el-input>
            </el-form-item>

            <el-form-item label="A:">
              <el-input
                v-model="form.xx1"
                placeholder="请输入选项如:A.15"
              ></el-input>
            </el-form-item>

            <el-form-item label="B:">
              <el-input
                v-model="form.xx2"
                placeholder="请输入选项如:B.15"
              ></el-input>
            </el-form-item>

            <el-form-item label="C:">
              <el-input
                v-model="form.xx3"
                placeholder="请输入选项如:C.15"
              ></el-input>
            </el-form-item>

            <el-form-item label="D:">
              <el-input
                v-model="form.xx4"
                placeholder="请输入选项如:D.15"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                v-model="form.answer"
                placeholder="请输入正确选项如:A"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="firstAdd">添加</el-button>
              <el-button type="default" @click="firstCancel">取消</el-button>
            </div>
          </el-form>
        </el-tab-pane>

        <!-- 填空题 -->
        <el-tab-pane label="填空题" name="second"
          ><el-form ref="form" :model="form2" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form2.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="填空题" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form2.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form2.tm"
                placeholder="请输入题目如:1+1=_?"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                type="textarea"
                v-model="form2.answer"
                placeholder="请输入正确答案,如:1+1=2"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="secondAdd">添加</el-button>
              <el-button type="default" @click="secondCancel">取消</el-button>
            </div>
          </el-form></el-tab-pane
        >
        <!-- 多选题 -->
        <el-tab-pane label="多选题" name="third"
          ><el-form ref="form" :model="form3" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form3.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="多选题" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form3.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form3.tm"
                placeholder="请输入题目如:1+1=2?"
              ></el-input>
            </el-form-item>

            <el-form-item label="选项">
              <el-input
                v-model="form3.xx"
                placeholder="请输入选项并用英文分号分割,如:A.1;B.2;C.3"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                v-model="form3.answer"
                placeholder="请输入正确选项并用英文分号分割如:A;B"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="thirdAdd">添加</el-button>
              <el-button type="default" @click="thirdCancel">取消</el-button>
            </div>
          </el-form></el-tab-pane
        >

        <!-- 判断题 -->
        <el-tab-pane label="判断题" name="fourth"
          ><el-form ref="form" :model="form4" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form4.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="判断题" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form4.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form4.tm"
                placeholder="请输入题目如:1+1=2?"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                v-model="form4.answer"
                placeholder="请输入0或1,0表示错误,1表示正确如:0"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="fourthAdd">添加</el-button>
              <el-button type="default" @click="fourthCancel">取消</el-button>
            </div>
          </el-form></el-tab-pane
        >
        <!-- 简答题 -->
        <el-tab-pane label="简答题" name="fifth"
          ><el-form ref="form" :model="form5" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form5.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="简答题" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form5.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form5.tm"
                placeholder="请输入题目如:请简述操作系统的构成"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                type="textarea"
                v-model="form5.answer"
                placeholder="请输入正确答案,如:xxxxx"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="fifthAdd">添加</el-button>
              <el-button type="default" @click="fifthCancel">取消</el-button>
            </div>
          </el-form></el-tab-pane
        >

        <!-- 程序题 -->
        <el-tab-pane label="程序题" name="sixth"
          ><el-form ref="form" :model="form6" label-width="80px">
            <el-form-item label="题目类型">
              <el-select style="width: 100%" v-model="form6.type">
                <el-option label="请选择" value=""></el-option>
                <el-option label="程序题" value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题号:">
              <el-input
                v-model="form6.tid"
                placeholder="请输入题号如:1"
              ></el-input>
            </el-form-item>

            <el-form-item label="题目:">
              <el-input
                v-model="form6.tm"
                placeholder="请输入题目如:请写出冒泡排序"
              ></el-input>
            </el-form-item>

            <el-form-item label="答案">
              <el-input
                type="textarea"
                v-model="form6.answer"
                placeholder="请输入正确答案,如:xxxxx"
              ></el-input>
            </el-form-item>

            <div class="danxuan-button">
              <el-button type="primary" @click="sixthAdd">添加</el-button>
              <el-button type="default" @click="sixthCancel">取消</el-button>
            </div>
          </el-form></el-tab-pane
        >
        <!-- 查看录入的题目 -->
        <el-tab-pane label="查看录入的题目" name="seventh"
          ><!-- 单选 -->
          <div class="danxuan" v-show="danxuan.length != 0">
            <h3>单选题</h3>
            <div v-for="item in danxuan" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-radio
                disabled
                v-for="(item2, index2) in item.choice"
                v-model="item.studentAnswer"
                :key="index2"
                :label="index2"
                style="width: 100%"
              >
                {{ item2 }}
              </el-radio>
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>

          <!-- 填空题 -->
          <div class="tiankong" v-show="tiankong.length != 0">
            <h3>填空题</h3>
            <div v-for="item in tiankong" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-input
                disabled
                type="textarea"
                :rows="5"
                v-model="item.studentAnswer"
              >
              </el-input>
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>

          <!-- 多选 -->
          <div class="duoxuan" v-show="duoxuan.length != 0">
            <h3>多选题</h3>
            <div v-for="item in duoxuan" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-checkbox-group v-model="item.studentAnswer">
                <el-checkbox
                  disabled
                  v-for="(item2, index2) in item.choice"
                  :key="index2"
                  size="small"
                  :label="item2"
                  style="width: 100%"
                ></el-checkbox>
              </el-checkbox-group>
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>

          <!-- 判断 -->
          <div class="panduan" v-show="panduan.length != 0">
            <h3>判断题</h3>
            <div v-for="item in panduan" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-radio disabled v-model="item.studentAnswer" label="0"
                >正确</el-radio
              >
              <el-radio disabled v-model="item.studentAnswer" label="1"
                >错误</el-radio
              >
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>

          <!-- 简答题 -->
          <div class="tiankong" v-show="jianda.length != 0">
            <h3>简答题</h3>
            <div v-for="item in jianda" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-input
                disabled
                type="textarea"
                :rows="5"
                v-model="item.studentAnswer"
              >
              </el-input>
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>

          <!-- 程序题 -->
          <div class="tiankong" v-show="chengxu.length != 0">
            <h3>程序题</h3>
            <div v-for="item in chengxu" :key="item.questionId">
              <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
              <el-input
                disabled
                type="textarea"
                :rows="5"
                v-model="item.studentAnswer"
              >
              </el-input>
              <p>正确答案{{ item.answer }}</p>
            </div>
          </div>
          <div class="danxuan-button">
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>请前往个人中心完善信息 <router-link to="/teacherHome/teacherHomepage">点击前往</router-link> </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import qs from "qs";
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      code: "",
      question: [],
      danxuan: [], //单选
      duoxuan: [], //多选
      tiankong: [], //填空题
      panduan: [], //填空题
      jianda: [], //简答题
      chengxu: [], //程序题
      form: {
        type: "",
        tid: "",
        tm: "",
        xx1: "",
        xx2: "",
        xx3: "",
        xx4: "",
        answer: "",
      },
      form2: {
        type: "",
        tid: "",
        tm: "",
        answer: "",
      },
      form3: {
        type: "",
        tid: "",
        tm: "",
        xx: "",
        answer: "",
      },
      form4: {
        type: "",
        tid: "",
        tm: "",
        answer: "",
      },
      form5: {
        type: "",
        tid: "",
        tm: "",
        answer: "",
      },
      form6: {
        type: "",
        tid: "",
        tm: "",
        answer: "",
      },
    };
  },
  methods: {
    firstAdd() {
      if (
        this.form.type != "" &&
        this.form.tid != "" &&
        this.form.tm != "" &&
        this.form.xx1 != "" &&
        this.form.xx2 != "" &&
        this.form.xx3 != "" &&
        this.form.xx4 != "" &&
        this.form.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form.type;
        obj.questionId = this.form.tid;
        obj.questionTm = this.form.tm;
        let arr = [];
        arr.push(this.form.xx1);
        arr.push(this.form.xx2);
        arr.push(this.form.xx3);
        arr.push(this.form.xx4);
        obj.choice = arr;
        obj.answer = this.form.answer;
        this.question.push(obj);
        // console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form.type = "";
        this.form.tid = "";
        this.form.tm = "";
        this.form.xx1 = "";
        this.form.xx2 = "";
        this.form.xx3 = "";
        this.form.xx4 = "";
        this.form.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    firstCancel() {
      this.form.type = "";
      this.form.tid = "";
      this.form.tm = "";
      this.form.xx1 = "";
      this.form.xx2 = "";
      this.form.xx3 = "";
      this.form.xx4 = "";
      this.form.answer = "";
    },
    secondAdd() {
      if (
        this.form2.type != "" &&
        this.form2.tid != "" &&
        this.form2.tm != "" &&
        this.form2.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form2.type;
        obj.questionId = this.form2.tid;
        obj.questionTm = this.form2.tm;
        obj.answer = this.form2.answer;
        this.question.push(obj);
        // console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form2.type = "";
        this.form2.tid = "";
        this.form2.tm = "";
        this.form2.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    secondCancel() {
      this.form2.type = "";
      this.form2.tid = "";
      this.form2.tm = "";
      this.form2.answer = "";
    },
    thirdAdd() {
      if (
        this.form3.type != "" &&
        this.form3.tid != "" &&
        this.form3.tm != "" &&
        this.form3.xx != "" &&
        this.form3.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form3.type;
        obj.questionId = this.form3.tid;
        obj.questionTm = this.form3.tm;
        let arr = this.form3.xx.split(";");
        obj.choice = arr;
        let arr2 = this.form3.answer.split(";");
        obj.answer = arr2;
        this.question.push(obj);
        // console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form3.type = "";
        this.form3.tid = "";
        this.form3.tm = "";
        this.form3.xx = "";
        this.form3.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    thirdCancel() {
      this.form3.type = "";
      this.form3.tid = "";
      this.form3.tm = "";
      this.form3.xx = "";
      this.form3.answer = "";
    },
    fourthAdd() {
      if (
        this.form4.type != "" &&
        this.form4.tid != "" &&
        this.form4.tm != "" &&
        this.form4.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form4.type;
        obj.questionId = this.form4.tid;
        obj.questionTm = this.form4.tm;
        obj.answer = this.form4.answer;
        this.question.push(obj);
        console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form4.type = "";
        this.form4.tid = "";
        this.form4.tm = "";
        this.form4.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    fourthCancel() {
      this.form4.type = "";
      this.form4.tid = "";
      this.form4.tm = "";
      this.form4.answer = "";
    },
    fifthAdd() {
      if (
        this.form5.type != "" &&
        this.form5.tid != "" &&
        this.form5.tm != "" &&
        this.form5.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form5.type;
        obj.questionId = this.form5.tid;
        obj.questionTm = this.form5.tm;
        obj.answer = this.form5.answer;
        this.question.push(obj);
        // console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form5.type = "";
        this.form5.tid = "";
        this.form5.tm = "";
        this.form5.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    fifthCancel() {
      this.form5.type = "";
      this.form5.tid = "";
      this.form5.tm = "";
      this.form5.answer = "";
    },
    sixthAdd() {
      if (
        this.form6.type != "" &&
        this.form6.tid != "" &&
        this.form6.tm != "" &&
        this.form6.answer != ""
      ) {
        let obj = {};
        obj.questionType = this.form6.type;
        obj.questionId = this.form6.tid;
        obj.questionTm = this.form6.tm;
        obj.answer = this.form6.answer;
        this.question.push(obj);
        // console.log(this.question);
        Message.success({
          showClose: true,
          message: "成功添加一题",
          type: "success",
        });

        //清空
        this.form6.type = "";
        this.form6.tid = "";
        this.form6.tm = "";
        this.form6.answer = "";
      } else {
        Message.error({
          showClose: true,
          message: "请输入完整",
          type: "error",
        });
      }
    },
    sixthCancel() {
      this.form6.type = "";
      this.form6.tid = "";
      this.form6.tm = "";
      this.form6.answer = "";
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      if (tab.paneName == "seventh") {
        for (let i = 0; i < this.question.length; i++) {
          //单选
          if (this.question[i].questionType == "1") {
            this.danxuan.push(this.question[i]);
          } else if (this.question[i].questionType == "2") {
            //填空
            this.tiankong.push(this.question[i]);
          } else if (this.question[i].questionType == "3") {
            //多选
            this.duoxuan.push(this.question[i]);
          } else if (this.question[i].questionType == "4") {
            //判断
            this.panduan.push(this.question[i]);
          } else if (this.question[i].questionType == "5") {
            //简答
            this.jianda.push(this.question[i]);
          } else if (this.question[i].questionType == "6") {
            //程序
            this.chengxu.push(this.question[i]);
          }
        }
      }
    },
    //生成随机试卷编号
    createSixNum() {
      var Num = "";
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      return Num;
    },
    //提交数据axios
    submitAxios() {
      axios({
        method: "post",
        url: "v1/teachers/sj",
        data: qs.stringify(
          {
            sj: JSON.stringify(this.question),
            eid: this.code,
          },
          { indices: false }
        ),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      })
        .then((result) => {
          if (result.data.status == 200) {
            Message.success({
              showClose: true,
              message: "提交成功",
              type: "success",
            });
            this.$router.push("/teacherHome");
          } else {
            Message.error({
              showClose: true,
              message: "提交失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    submit() {
      if (this.question.length != 0) {
        this.code = this.createSixNum();
        this.submitAxios();
      } else {
        Message.error({
          showClose: true,
          message: "你还没有录入题目",
          type: "error",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.setExam {
  margin-top: 20px;
  overflow: auto;
  .danxuan-button {
    display: flex;
    justify-content: center;
  }
}
</style>